﻿@{
    const string AdaptedLightDark = "Adapted to Light/Dark theme";
    const string CustomColor = "#570078"; // like Purple color
}
<FluentGrid Style="align-items: center;">
    <FluentGridItem xs="2" title="Color Enumeration value">Color&nbsp;Enum</FluentGridItem>
    <FluentGridItem xs="4" title="Equivalent CSS variable">CSS variable</FluentGridItem>
    <FluentGridItem xs="1" title="@AdaptedLightDark">Theme</FluentGridItem>
    <FluentGridItem xs="5" title="Examples">Examples</FluentGridItem>

    @foreach (var color in Enum.GetValues(typeof(Color)).Cast<Color>())
    {
        var name = Enum.GetName<Color>(color);
        var css = color == Color.Custom ? CustomColor : color.ToAttributeValue();

        <FluentGridItem xs="2">
            @name
        </FluentGridItem>
        <FluentGridItem xs="4">
            <code>@css</code>
        </FluentGridItem>
        <FluentGridItem xs="1" title="@AdaptedLightDark">
            @switch (color)
            {
                case Color.Neutral:
                case Color.Fill:
                case Color.FillInverse:
                case Color.Lightweight:
                    <FluentIcon Value="@(new Icons.Regular.Size24.CheckboxChecked())"
                                Color="@Color.Success" />
                    break;

                default:
                    <FluentIcon Value="@(new Icons.Regular.Size24.CheckboxUnchecked())"
                                Color="@Color.Info" />
                    break;
            }
        </FluentGridItem>
        <FluentGridItem xs="1" Style="background-color: var(--neutral-layer-3);">
            @if (color == Color.Custom)
            {
                <FluentIcon Value="@(new @Icons.Filled.Size24.Alert())"
                            Color="Color.Custom"
                            CustomColor="@CustomColor"
                            Title="@($"Icon with Color=\"Color.Custom\"")" />
            }
            else
            {
                <FluentIcon Value="@(new @Icons.Filled.Size24.Alert())"
                            Color="@color"
                            Title="@($"Icon with Color=\"Color.{name}\"")" />
            }
        </FluentGridItem>
        <FluentGridItem xs="2" Style="background-color: var(--neutral-layer-3);">
            <FluentButton IconStart="@(new Icons.Filled.Size24.Alert().WithColor(css))"
                          Title="@($"Button with an IconStart colorized using .WithColor(\"{css}\")")">
                OK
            </FluentButton>
        </FluentGridItem>
        <FluentGridItem xs="2" Style="background-color: var(--neutral-layer-3);">
            <FluentButton IconStart="@(new Icons.Filled.Size24.Alert().WithColor(css))"
                          Title="@($"Button with an IconStart colorized using .WithColor(\"{css}\")")"
                          Appearance="Appearance.Accent">
                OK
            </FluentButton>
        </FluentGridItem>
    }

</FluentGrid>

<style>
    .fluent-grid > div:nth-of-type(-n+4) {
        font-weight: 600;
    }

    .fluent-grid > div:not(:nth-of-type(-n+4)) {
        height: 60px;
        font-weight: 600;
    }

    .fluent-grid fluent-button {
        font-weight: 600;
    }
</style>

<p>
    With <code>Color.Custom</code>, supply your own color value through the <code>CustomColor</code> parameter. <br/>
    Needs to be formatted as an HTML hex color string (#rrggbb or #rgb) or a CSS variable (var(--...)).
</p>

